.step{
	box-sizing: border-box;
	padding-bottom: 70px;
	height: 100%;
	background: #F3F3F3;
	overflow-y: scroll;
	scrollbar-width: none;
	&::-webkit-scrollbar {
		display: none
	}
	.date-info{
		padding: 0 27px;
		.show-date{
			height: 44px;
			line-height: 44px;
			font-size: 18px;
			color: #333333;
			.xndatepicker-pc-input{
				&::after{
					content: '';
					display: inline-block;
					width: 12px;
					height: 12px;
					background: url("../img/ic_list_enter.png") center right no-repeat;
					background-size: 12px 12px;
				}
			}
		}
	}
	.chart-box{
		margin: 12px auto 10px;
		width: 350px;
		background: #FFFFFF;
		border-radius: 16px;
		.no-data{
			padding-top: 92px;
			text-align: center;
			img{
				width: 148px;
			}
			.text{
				margin-top: 14px;
				font-size: 14px;
				color: #AAAAAA;
				line-height: 19px;
			}
		}
		.chart-in{
			.name{
				padding-top: 10px;
				padding-left: 25px;
				font-size: 12px;
				color: #AAAAAA;
				line-height: 16px;
			}
			.step-num{
				padding-left: 25px;
				height: 44px;
				font-size: 32px;
				font-weight: bold;
				color: #333333;
				line-height: 44px;
				span{
					font-size: 16px;
					font-weight: normal;
					color: #AAAAAA;
				}
			}
		}
		.tips{
			padding: 0 20px 14px;
			font-size: 12px;
			color: #AAAAAA;
			line-height: 18px;
		}
	}
	.setting{
		margin: 0 auto;
		width: 350px;
		background: #FFFFFF;
		border-radius: 16px;
		.set-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 20px;
			height: 60px;
			border-bottom: 1px solid #EEEEEE;
			.left{
				display: flex;
				align-items: center;
				font-size: 16px;
				color: #333333;
				img{
					margin-right: 10px;
					width: 22px;
					height: 22px;
				}
			}
			.arrow{
				width: 12px;
			}
		}
		.only-data{
			display: flex;
			align-items: center;
			padding: 0 20px;
			height: 58px;
			font-size: 28px;
			font-weight: bold;
			color: #333333;
			span{
				font-size: 16px;
				font-weight: 400;
				color: #AAAAAA;
			}
		}
		.day{
			display: flex;
			justify-content: space-between;
			padding: 0 20px;
			.target{
				margin-top: 22px;
				.name{
					height: 16px;
					font-size: 12px;
					line-height: 16px;
				}
				.step-num{
					margin: 10px 0;
					font-size: 24px;
					font-weight: 500;
					color: #000000;
					span{
						font-size: 14px;
						font-weight: normal;
					}
				}
				.set-btn{
					display: flex;
					align-items: center;
					padding-left: 10px;
					padding-right: 6px;
					height: 24px;
					font-size: 12px;
					color: #AAAAAA;
					background: #F3F3F3;
					border-radius: 12px;
					.type-img{
						margin-right: 3px;
						width: 16px;
						height: 16px;
					}
					.arrow{
						width: 12px;
						height: 12px;
					}
				}
			}
		}
		.overview{
			display: flex;
			align-items: center;
			padding: 0 20px;
			height: 100px;
			.view-item{
				flex: 1;
				text-align: center;
				.text{
					height: 19px;
					font-size: 14px;
					color: #AAAAAA;
					line-height: 19px;
				}
				.num{
					margin: 5px 0;
					height: 25px;
					line-height: 25px;
					font-size: 18px;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
	&.sleep{
		.setting{
			margin-top: 20px;
			.tips{
				padding-left: 17px;
				padding-bottom: 17px;
				font-size: 12px;
				color: #333333;
				line-height: 18px;
			}
			.lists{
				&-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20px 24px;
					.lable{
						font-size: 12px;
						color: #777777;
						line-height: 16px;
					}
					.time{
						height: 25px;
						font-size: 18px;
						color: #333333;
						span{
							font-size: 14px;
						}
					}
					.chart{
						.lable{
							text-align: end;
						}
					}
					.progress{
						position: relative;
						height: 25px;
						width: 200px;
						.scale{
							position: absolute;
							top: 50%;
							right: 0;
							margin-top: -5px;
							height: 10px;
							border-radius: 5px;
						}
					}
				}
			}
		}
	}
}